<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="商品ID：" prop="unit">
            <el-input class="input" v-model="searchParams.id" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="商品名称：" prop="unit">
            <el-input class="input" v-model="searchParams.name" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="商户名称：" prop="unit">
            <el-input class="input" v-model="searchParams.shop_name" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="销售状态：" prop="status">
            <el-select v-model="searchParams.status" placeholder="请选择" clearable>
              <el-option v-for="item in formData.options.status" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台类目：" prop="genera">
            <el-select v-model="searchParams.genera" placeholder="请选择" clearable>
              <el-option v-for="item in generaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="功能分类：" prop="activity">
            <el-select v-model="searchParams.activity" placeholder="请选择" clearable>
              <el-option v-for="item in activityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签：" prop="genera">
            <el-select v-model="searchParams.tags" placeholder="请选择" clearable>
              <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库存数小于：" prop="unit">
            <el-input class="input" v-model="searchParams.maxStock" maxlength='1000' placeholder="请输入" style="width: 80px;"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px"
              size='small'>搜索</el-button>
          </el-form-item>
        </el-form>
        <el-collapse>
          <el-collapse-item title="批量修改" name="1">
            <el-form :inline="true">
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
                  <el-form-item label="平台类目">
                    <el-select v-model="selectionData.genera" placeholder="请选择" clearable size="mini">
                      <el-option v-for="item in generaList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button @click="updateAllAction('genera', '平台类目', selectionData.genera)"
                      type="primary" size="mini">确认修改</el-button></div>
                  <el-form-item label="标签" style="margin-left: 20px;">
                    <el-select v-model="selectionData.tag" placeholder="请选择" clearable size="mini">
                      <el-option v-for="item in tagList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button @click="updateAllAction('tag', '标签', selectionData.tag)"
                      type="primary" size="mini">确认修改</el-button></div>
                  <el-form-item label="功能分类" style="margin-left: 20px;">
                    <el-select v-model="selectionData.activity" placeholder="请选择" clearable size="mini">
                      <el-option v-for="item in activityList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button
                      @click="updateAllAction('activity', '功能分类', selectionData.activity)" type="primary"
                      size="mini">确认修改</el-button></div>
                  <el-form-item label="销售状态" style="margin-left: 20px;">
                    <el-radio v-model="selectionData.status" :label=1>在售</el-radio>
                    <el-radio v-model="selectionData.status" :label=0>下架</el-radio>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button
                      @click="updateAllAction('status', '销售状态', selectionData.status)" type="primary"
                      size="mini">确认修改</el-button></div>
                  <el-form-item label="增加销量" style="margin-left: 20px;">
                    <el-input style="margin-left: 10px;width: 120px;" v-model="selectionData.sales" type="number"></el-input>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button
                      @click="updateAllAction('sales', '销量', selectionData.sales)" type="primary"
                      size="mini">确认修改</el-button></div>
                  <el-form-item label="是否校验库存" style="margin-left: 20px;">
                    <el-radio v-model="selectionData.isCheckStock" :label=1>是</el-radio>
                    <el-radio v-model="selectionData.isCheckStock" :label=0>否</el-radio>
                  </el-form-item>
                  <div style="margin-left: 10px;"><el-button
                      @click="updateAllAction('isCheckStock', '是否校验库存', selectionData.isCheckStock)" type="primary"
                      size="mini">确认修改</el-button></div>
                </div>
            </el-form>
          </el-collapse-item>
        </el-collapse>
        <el-form :model="searchParams" ref="searchParams" :inline="true" style="margin:10px 0">
          <el-button @click="operateAction('create', {})" type="primary" plain size='small'>新增</el-button>
          <el-button @click="operateAction('delete', {})" type="info" plain size='small'>删除</el-button>
        </el-form>
        <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="id" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="generaModel.name" label="平台类目" show-overflow-tooltip></el-table-column>
          <el-table-column prop="coverUrl" label="商品图片" show-overflow-tooltip>
            <template slot-scope="{row, index}"><img width="50" height="50" :src="row.coverUrl"></template>
          </el-table-column>
          <el-table-column prop="tags" label="标签" show-overflow-tooltip width="140">
            <template slot-scope="{row, index}">
              <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(item, index) in row.tagList" style="border: 1px solid #ddd;padding: 2px;margin: 2px;display: flex;justify-content: center;align-items: center;background: #FFF;">
                {{item.name}}
              </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="shopModel.name" label="商户" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sales" label="销量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="activityModel.name" label="功能分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="销售状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ formData.dicts.status[scope.row.status] }}</div>
              <div></div>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="顺序" show-overflow-tooltip></el-table-column>
          <el-table-column prop="redact" label="操作" fixed="right" width="120">
            <template slot-scope="{ row, index }">
              <el-button type="text" @click="operateAction('update', row)" size='medium'>修改</el-button>
              <!-- <el-button type="text" @click="operateAction('detail', row)" size='medium'>详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formData } from './data'
import { findActivityList } from '@/api/merchant/activity.js'
import { findGeneraList } from '@/api/merchant/genera.js'
import { findTagList } from '@/api/merchant/tag.js'
import { findItemList, deleteItems } from '@/api/merchant/item.js'

export default {
  components: {},
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      searchParams: {},
      multipleSelection: [],
      formData,
      generaList: [],
      tagList: [],
      activityList: [],
      selectionData: {}
    }
  },
  created() {
    if (this.$route.query.currentSearchParams) {
      this.searchParams = JSON.parse((decodeURIComponent(this.$route.query.currentSearchParams)))
      this.page = this.searchParams.page
    }
    this.findGeneraList()
    this.findTagList()
    this.findActivityList()
    this.getDataList()
  },
  methods: {
    handleSearch() {
      this.page = 1
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    findGeneraList() {
      findGeneraList().then(res => {
        if (res.data.code == 10000) {
          this.generaList = res.data.data.list
        }
      });
    },
    findTagList() {
      findTagList().then(res => {
        if (res.data.code == 10000) {
          this.tagList = res.data.data.list
        }
      });
    },
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      this.searchParams.routerName = this.$route.name
      findItemList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    findActivityList() {
      findActivityList().then(res => {
        if (res.data.code == 10000) {
          this.activityList = res.data.data.list
        }
      });
    },
    updateAllAction(key, title, value) {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: '请选择操作行',
          type: 'info'
        })
        return
      }
      var rowIds = this.multipleSelection.map(function (item) {
        return item.id
      })

      var params = {
        key: key,
        value: value,
        obj_ids: rowIds
      }

      var _this = this
      this.$confirm('是否确认修改选中的' + rowIds.length + '条记录的' + title + '?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return _this.request_post('merchant/item/bulk_update/', params).then((res) => {
          if (res.data.code == 10000) {
            _this.getDataList()
            _this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        })

      })
    },

    operateAction(scene, row) {
      switch (scene) {
        case 'create':
          this.$router.push({ name: 'CreateItem', query: { itemId: '', currentRouteName: this.$route.name } });
          break;
        case 'update':
          this.$router.push({ name: 'CreateItem', query: { itemId: row.id, currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) } })
          break;
        case 'detail':
          this.$router.push({ name: 'Detail', query: { rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) } })
          break;
        case 'delete':
          if (this.multipleSelection.length <= 0) {
            this.$message({
              message: '请选择操作行',
              type: 'info'
            })
          } else {
            var rowIds = this.multipleSelection.map(function (item) {
              return item.id
            })
            var _this = this
            this.$confirm('是否确认删除选中的' + rowIds.length + '条记录?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function () {
              return deleteItems({
                obj_ids: rowIds
              }).then(res => {
                if (res.data.code == 10000) {
                  _this.getDataList()
                  _this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                }
              })
            })
          }
          break;
        default:
          break;
      }
    },
  },
}
</script>


<style lang="scss" scoped></style>
